<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="bill">
			<form @submit='onSubmit'>
				<view class="module">
					<!-- <picker @change="setcontype" :value="contype_index" :range="contype">
						<view class="line bb1">
							<view class="title">发票类型</view>
							<view class="value">
								{{contype[contype_index]}} <text class="icon iconjiantouyou"></text>
							</view>
						</view>
					</picker> -->
					<view class="entity">
						<view @click="setrole(1)" :class="role==1?'opt price':'price'">个人</view>
						<view @click="setrole(2)" :class="role==2?'opt price':'price'">单位</view>
					</view>
					<view v-if="role==1">
						<label class="line">
							<view class="title">个人名称</view>
							<input class="input" type="text" name="invoice_name" v-model="invoice_name"
								placeholder="请填写您的姓名(必填)"></input>
						</label>
						<label class="line">
							<view class="title">收票人电话</view>
							<input class="input" type="number" name="phone" maxlength="11" v-model="phone"
								placeholder="请填写收票人电话(必填)"></input>
						</label>
						<label class="line">
							<view class="title">收票人邮箱</view>
							<input class="input" type="text" name="mail" v-model="mail"
								placeholder="请填写收票人邮箱(必填)"></input>
						</label>
					</view>

					<view v-if="role==2">
						<label class="line">
							<view class="title">公司名称</view>
							<input class="input" type="text" name="company_name" v-model="company_name"
								placeholder="请填写公司名称(必填)"></input>
						</label>
						<label class="line">
							<view class="title">公司税号</view>
							<input class="input" type="number" name="taxid" maxlength="25" v-model="taxid"
								placeholder="请填写公司税号(必填)"></input>
						</label>
					</view>
				</view>

				<view class="module" v-if="role==1">
					<!-- <picker @change="setmatter" :value="matter_index" :range="matter"> -->
					<view class="line">
						<view class="title">发票内容</view>
						<!-- <view class="value">
								{{matter[matter_index]}} <text class="icon iconjiantouyou"></text>
							</view> -->
					</view>
					<!-- </picker> -->

					<u-input trim v-model="content" type="textarea" maxlength="200" :border="false" height="200"
						placeholder="请输入发票内容" :auto-height="true" class="contentsinput" placeholderStyle="color:#CBCBCB"
						:clearable="false" />

				</view>
				<button class='button-submit' form-type='submit'>确定</button>
			</form>
		</view>
	</view>
</template>

<script>
	var _this, shak;
	export default {
		data() {
			return {
				settingdata: {
					name: '发票',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "invoice"
				},

				contype: ["普通发票", "电子发票"],
				contype_index: 0,
				matter: ["商品明细", "商品类别"],
				matter_index: 0,
				// 设置
				role: 1,
				// 用户id
				user_id: 0,
				// 发票名称 姓名或单位名称
				invoice_name: "",
				// 收票人电话
				phone: "",
				// 收票人邮箱
				mail: "",
				order_id: '',


				content: '',
				company_name: '',
				taxid: '',
			}
		},
		onLoad() {
			_this = this

			_this.getInvoiceInfo()
		},
		methods: {
			getInvoiceInfo() {
				_this.$api.get("selectBill", {
					type: _this.role
				}).then(data => {
					console.log(data, '接口')
					_this.invoice_name = data.name
					_this.phone = data.tel
					_this.mail = data.email
					_this.content = data.content
				})
			},
			// 切换单位
			setrole(e) {
				_this.role = e
				_this.getInvoiceInfo()
			},

			setcontype: function(e) {
				_this.contype_index = e.target.value
				console.log(e)
			},

			setmatter: function(e) {
				_this.matter_index = e.target.value
				console.log(e)
			},

			onSubmit: function(e) {
				let val = e.detail.value
				console.log(val)
				let email_reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

				if (_this.role == 1) {
					if (val.invoice_name == "") {
						uni.showToast({
							title: '请输填写您的姓名',
							icon: 'none',
							duration: 1500
						})
					} else if (val.phone.length == 0) {
						uni.showToast({
							title: '请填写收票人电话',
							icon: 'none',
							duration: 1500
						})
					} else if (val.mail.length == 0 || !email_reg.test(val.mail)) {
						console.log(email_reg.test(val.mail))
						uni.showToast({
							title: '请填写正确的收票人邮箱',
							icon: 'none',
							duration: 1500
						})
					} else {
						let url = 'addbill'
						let info = {
							type: _this.contype_index == 0 ? 1 : 2,
							name: val.invoice_name,
							tel: val.phone,
							email: val.mail,
							content: _this.content
						}
						// if (_this.order_id) {
						// 	url = 'order/add/invoice'
						// 	info.order_id = _this.order_id
						// }
						console.log(info, 'role 1')
						_this.$api.post("addbill", info).then(data => {
							console.log(data, '接口')
							uni.showToast({
								title: '设置成功',
								duration: 1500
							})
							// if (this.order_id) {
							// 	app.setprevpage(2, {
							// 		'isonshow': true
							// 	})
							// 	wx.navigateBack({
							// 		delta: 1
							// 	})
							// } else {
							// }
							setTimeout(function() {
								let Pages = getCurrentPages();
								let prevPage = Pages[Pages.length - 2]
								console.log(prevPage);
								prevPage.$vm.entity = "个人发票"
								prevPage.$vm.bill_id = data.bill_id
								uni.navigateBack({
									delta: 1
								})
							}, 1500);
						})

					}

				} else {
					if (val.company_name == "") {
						uni.showToast({
							title: '请填写公司名称',
							icon: 'none',
							duration: 1500
						})
					} else if (val.taxid == "") {
						uni.showToast({
							title: '请填写公司税号',
							icon: 'none',
							duration: 1500
						})
					} else {
						let url = ''
						let info = {
							type: 2,
							company_name: val.company_name,
							taxid: val.taxid,
						}

						console.log(info, 'role 2')
						_this.$api.post("addbill", info).then(data => {
							console.log(data, '接口')
							uni.showToast({
								title: '设置成功',
								duration: 1500
							})
							setTimeout(function() {
								let Pages = getCurrentPages();
								let prevPage = Pages[Pages.length - 2]
								console.log(prevPage);
								prevPage.$vm.entity = "公司发票"
								prevPage.$vm.bill_id = data.bill_id
								uni.navigateBack({
									delta: 1
								})
							}, 1500);
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8F8F8;
	}

	.bill {
		width: 100%;
		padding: 23rpx 24rpx 120rpx;
	}

	.bill .module {
		box-shadow: 0px 0px 24px 0px rgba(161, 161, 161, 0.18);
		background-color: #FFF;
		width: 100%;
		margin-bottom: 20rpx;
		padding: 20rpx 36rpx;
		border-radius: 16rpx;
	}

	.bill .module .line {
		line-height: 104rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bill .module .bb1 {
		border-bottom: 2rpx solid #EEEEEE;
	}

	.bill .module .line .title {
		color: #000000;
		font-size: 28rpx;
	}

	.bill .module .line .value {
		color: #666;
		font-size: 28rpx;
	}

	.bill .module .entity {
		padding: 32rpx 0rpx 10rpx;
		display: flex;
	}

	.bill .module .entity .price {
		height: 52rpx;
		line-height: 52rpx;
		padding: 0rpx 40rpx;
		border-radius: 26rpx;
		margin-right: 33rpx;
		color: #000;
		font-size: 28rpx;
		background: rgba(238, 238, 238, 1);
	}

	.bill .module .entity .price.opt {
		color: #ED2917;
		border: 2rpx solid #ED2917;
		background: rgba(255, 233, 229, 1);
	}

	.bill .module .line .input {
		text-align: right;
		flex: 1;
		padding-left: 20rpx;
	}

	.bill .button-submit {
		position: fixed;
		bottom: 20rpx;
		left: 40rpx;
		width: 680rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		color: #FFF;
		background: linear-gradient(86deg, #38BE8C, #05ADBB);
		padding: 0;
		z-index: 10;
		font-weight: 300;
	}

	.contentsinput {
		color: #333333;
		font-size: 30rpx;
		height: 200rpx;
		width: 100%;
		padding: 20rpx 0;
	}
</style>
